<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<style>
			@charset "UTF-8";
	
			body {
				margin: 10px 10px 10px 10px !important;
				background: #f2f2f2;
			}
			
			.page_container {
				border: 1px solid #f2f2f2;
				border-radius: 5px;
				background-color: #ffffff;
				padding: 20px;
			}
			
			.page_container .zhongxian {
				opacity: 0.15;
			}
			
			.page_container .atitle {
				margin-left: 20px;
				padding: 0 10px;
				font-size: 20px;
				font-weight: 300;
			}
			.layui-layer-dialog .layui-layer-setwin{
				display: none;
			}
			.imagetext{
				overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:100%; padding-top: 5px; padding-bottom: 5px;
			}
			.layselect{
				filter:brightness(40%);
			}
		</style>
		<link rel="stylesheet" href="../utils/layui/css/layui.css">
		<link rel="stylesheet" href="../utils/layui/css/admin.css">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<!-- 架子出来了 -->
		<div class="page_container" id="view">
			<div id="searchInfo" style="display: none;"><font style="padding: 2px 30px;color: #000;">共计搜索到<b id="dataNum"></b>条数据 &nbsp;, &nbsp;<a style="color: #f00;" onclick="cleanSearch(this);" href="javascript:void(0)">清除搜索</a></font></div>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;" id="fieldset">
				<legend>{{d.title}}</legend>
			</fieldset>
			
			<div class="layui-row" style="position: relative;">
				<div class="layui-col-xs6">

					<div class="grid-demo grid-demo-bg1">
						<div class="layui-btn-group" id="btn-group">
							{{#  arr_foreach(d.head_toolbar, function(k1, v1){ }}
							<button onclick="buttonClick(this)" data-event="{{v1.event}}"  data-href='{{v1.href}}' data-title="{{v1.title}}" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">{{v1.ico}}</i>{{v1.title}}</button>
							{{#  }); }}
						</div>
					</div>

				</div>

				<div class="layui-col-xs6" style="text-align: right;position: absolute;right: 0px;min-width: 400px;">
					<div class="grid-demo">
						<form name="" action="" method="">
							<select id="linesokey"  class="layui-btn layui-btn-primary" style="display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; font-size: 14px;">
								{{#  arr_foreach(d.table_struct.field, function(k1, v1){ }}
								{{#  if(v1.search === true){ }}
								  <option value="{{k1}}">{{v1.label}}</option>
								{{#  } }} 
								{{#  }); }}
							</select>
							<input id="linesoval" type="text" class="layui-btn layui-btn-primary" style="max-width: 100px;cursor:text;"
							 value="">
							<button type="button" class="layui-btn layui-btn-normal" onclick="lineSo(this)">搜索</button>
						</form>
					</div>
				</div>

			</div>

			
			<div class="layui-fluid" id="LAY-component-grid-list">
				<div class="layui-row layui-col-space10 demo-list" id="image-list">
				  
				</div>
			  </div>

			

			<div id="page"></div>
			
		</div>
	<!-- 需要字段页面样式需要调节 然后滚动条变化的时候表单页面会乱掉 -->
	<div id="image-list-tpl" style="display: none;">
		<div class="layui-col-sm4 layui-col-md3 layui-col-lg2 imagetext-list{{selected}}" onclick="layselect(this)" data-title="{{title}}"  data-id="{{id}}" data-url="{{url}}">
			<div class="layui-card">
				<a href="javascript:;">
					<div   style="height: 370px; overflow: hidden; background-color: #eee; text-align: center;">
						<img src="{{url}}" height="100%" data-id="{{id}}">
					</div>
					<p class="imagetext" title="{{title}}">{{title}}</p>
				</a>
			</div>
		</div>
	</div>
	<br /><br />
	<div style="text-align: center; background-color:#FFF; position: fixed; bottom: 0px; width: 100%;opacity: 0.8; padding-top: 8px; padding-bottom: 8px;display: none;"  id="confirmSelect">
		<button type="button" class="layui-btn layui-btn-normal" onclick="confirmSelect(this);">确认所选</button>
		<button type="button" class="layui-btn layui-btn-warm" onclick="javascript:parent.layer.closeAll();">取消选择</button>

	</div>
	</body>
	<script src="/admin/utils/layui/layui.js" charset="utf-8"></script>
	<script src="/admin/utils/layui/config.js" charset="utf-8"></script>
	<script>
		layui.use(['laypage', 'layer', 'view', 'finder'], function() {
			var $ = layui.$;
			var openWidth = getPageWidth() < 960 ? '100%' : '80%';
			if($_GET['fun'] != undefined){
				$("#fieldset").css("display", "none");
				$("#confirmSelect").css("display", "");
				
			}
			
			let laypage = layui.laypage;
			let tableStruct = {};
			var ui = layui.view;			
			let view = 0;
			//执行一个laypage实例
			window.layerPage = function(count) {
				$("#dataNum").html(count);
				laypage.render({
					elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
					layout: ['prev', 'page', 'next', 'limit', 'count'],
					count: count, //数据总数，从服务端得到
					limits: [30, 60, 100,160,200],
					limit: 30,
					jump: function(obj) {
						//拿到当前url地址
						//如果是第一次view = 0
						if (view == 0 && obj.curr > 1) {
							//请求数据
							ajaxPage(obj.curr, obj.limit);
						}else if(view == 1){
							ajaxPage(obj.curr, obj.limit);
						}
					}
				});
			}

			/**
			 * 请求数据
			 * @param {Object} page
			 * @param {Object} limit
			 */
			window.ajaxPage = function(page, limit) {
				var selectedArr = [];
				if($_GET['selected']){
					selectedArr = explode(',', $_GET['selected']);
				}
				ajax_request($_GET['api'], 'GET' , {page:page, limit:limit}, function(res){
					let html = '';
					var url = tableStruct['imagetext']['url'];
					var title = tableStruct['imagetext']['title'];
					var id = tableStruct['imagetext']['id'];
					for(i in res.data.data){
						var item = res.data.data[i];
						eval('var urlStr = item.'+url+';');
						eval('var titleStr = item.'+title+';');
						eval('var idStr = item.'+id+';');
						var selected = '';
						if(in_array(idStr, selectedArr)){
							selected = ' layselect';
						}
						html += str_replace(["{{url}}", "{{title}}", "{{id}}", "{{selected}}"], [urlStr, titleStr, idStr, selected], $("#image-list-tpl").html());
					}
					$("#image-list").html(html);
					if(view == 0){
						layerPage(res.data.total);
					}
					view = 1;
				});
			}
			
			window.layselect = function(obj){
				if($_GET['fun'] != undefined && strrpos($_GET['fun'], 'one') >= 0){
					//全部取消
					$('.layselect').removeClass('layselect');
				}
				//判断是否存在layselect
				if(strrpos($(obj).prop('class'), 'layselect') >= 0){
					$(obj).removeClass('layselect');
				}else{
					$(obj).addClass("layselect");
				}
				
			}
			window.buttonClick = function(obj){
				//开始做增删改查
				switch ($(obj).data('event')){
					case 'add':
						var addPage = './finder/add.html';
						if(window.memuData.custom_tempadd != ''){
							addPage = window.memuData.custom_tempadd;
						}
						var href = addPage+'?api='+$_GET['api']+'&_method_='+$(obj).data('href')+'&toolbar=head';
						layer.open({
							type: 2,
							title: "添加",
							shadeClose: true,
							shade: 0.5,
							scrollbar: false,
							offset:'r',
							area: [openWidth, '100%'],
							content: href, //iframe的url
							cancel: function(){
								if(window.toRefresh == true){
									window.location.reload();
								}
							}
						});
						break;
					case 'open':
						break;
					case 'submit':
						break;
					case 'delete':
						if($(".layselect").length <= 0){
							noticeMsg('error', "请选择需要删除的内容");
						}else{
							var query = "";
							window.deleteObj = [];
							$(".layselect").each(function(index){
								array_push(deleteObj, this);
								query += tableStruct.primary_key+'[]='+$(this).data('id')+'&';
							});
							layer.confirm('确定要'+$(obj).data("title")+"?", function(index){
									layer.closeAll();
									ajax_request($_GET['api'], "POST", '_method=delete&'+query+"", function(res){
										if(res.errorcode == 0){
											noticeMsg('success', "删除成功");
											for(i in deleteObj){
												$(deleteObj[i]).remove();
											}
											if($(".imagetext-list").length <= 1){
												window.location.reload();//删完了就刷新
											}
										}else{
											noticeMsg('error', res.errormsg);
										}
									});
						    });
						}
						break;	
					//自定义头工具栏右侧图标 - 提示
				    case 'reload':
					  window.location.reload();			
					default:
						break;
				}
			}
			window.selectAll = function(obj){
				$(".imagetext-list").each(function(index){
					$(this).removeClass('layselect');
					if($(obj).data('status') == 0){
						$(this).addClass("layselect");
					}
				});
				if($(obj).data('status') == 0){
					$(obj).data('status', 1);
					$(obj).html("全不选");
				}else{
					$(obj).data('status', 0);
					$(obj).html("全选");
				}
			}

			window.addPage = function(obj){
				var href = './finder/add.html?api='+$_GET['api'];
				if($(obj).data('page') != ''){
					href = $(obj).data('page')+'?api='+$_GET['api'];
				}
				layer.open({
					type: 2,
					title: "添加",
					shadeClose: true,
					shade: 0.5,
					scrollbar: false,
					offset:'r',
					area: [openWidth, '100%'],
					content: href, //iframe的url
					cancel: function(){
						if(window.toRefresh == true){
							window.location.reload();
						}
					}
				});
			}

			window.batchDelete = function(obj){
				if($(".layselect").length <= 0){
					noticeMsg('error', "请选择需要删除的内容");
				}else{
					var query = "";
					window.deleteObj = [];
					$(".layselect").each(function(index){
						array_push(deleteObj, this);
						query += tableStruct.primary_key+'[]='+$(this).data('id')+'&';
					});
					
					ajax_request($_GET['api'], "POST", '_method=delete&'+query+"", function(res){
						if(res.errorcode == 0){
							noticeMsg('success', "删除成功");
							for(i in deleteObj){
								$(deleteObj[i]).remove();
							}
							if($(".imagetext-list").length <= 1){
								window.location.reload();//删完了就刷新
							}
						}else{
							noticeMsg('error', res.errormsg);
						}
					});
				}
			}
			//确认所选
			window.confirmSelect = function(obj){
				var url = tableStruct['imagetext']['url'];
				var title = tableStruct['imagetext']['title'];
				var id = tableStruct['imagetext']['id'];
				if($_GET['fun'] != undefined && strrpos($_GET['fun'], 'one') >= 0){
					var myobj = $(".layselect").eq(0);
					parent.window.tempJson = {};
					parent.window.tempJson[id] = $(myobj).data('id');
					parent.window.tempJson[title] = $(myobj).data('title');
					parent.window.tempJson[url] = $(myobj).data('url');
					eval('parent.window.' + $_GET['fun'] + '()');
				}else{
					//这个验证不能在这里做
					// if ($('.layselect').length > (appConfig.finderSelectImageMaxNum - intval($_GET['existnum']))) {
					// 	noticeMsg('error', '最多可选' + (appConfig.finderSelectImageMaxNum - intval($_GET['existnum']))+"个");
					// 	return false;
					// }
					
					parent.window.tempJson = [];
					$(".layselect").each(function(index){
						var myjson = {};
						myjson[id] = $(this).data('id');
						myjson[title] = $(this).data('title');
						myjson[url] = $(this).data('url');
						array_push(parent.window.tempJson, myjson);
					});
					eval('parent.window.' + $_GET['fun'] + '()');
				}
			}
			//先来个视图初始化
			
			ui.init($_GET['api']+'?_method=menu', function(res){
				window.memuData = res.data;//全局菜单数据
				tableStruct = res.data.table_struct;
				ajaxPage(1, 30);
				showSearchInfo();
			});
		});
		
	</script>
</html>
